<template>
  <div>
    <div
      :class="className"
      :id="id"
      :style="{ height: height, width: width }"
    ></div>
    <div>
      <div style="fontSize:11px;color:rgb(46,148,255);textAlign:center">{{chartData.normalData.num}}</div>
      <div style="fontSize:11px;lineHeight:20px;color:rgb(122,122,122);textAlign:center">{{chartData.normalData.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(echarts);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表



      let seriesInside = {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        min: 0,
        max: 100,
        radius: "90%", //控制大小
        pointer: {
          //仪表盘指针
          show: true,
          width: 14,
          icon: "circle",
          length: "190%",
          itemStyle: {
            color: "rgb(130,111,253)",
          },
        },
        progress: {
          show: true,
          overlap: false,
          width: 6,
          roundCap: false,
          clip: true,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(130,111,253)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgb(130,111,253)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          //线条样式
          // show: false
          lineStyle: {
            width: 6,
            color: [
              //浅变色背景
              [
                1,
                new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0.5,
                    color: "rgb(232,243,255)",
                  },
                  {
                    offset: 1,
                    color: "rgb(232,243,255)",
                  },
                ]),
              ],
            ],
          },
        },
        splitLine: {
          show: false,
          //刻度_分割线样式
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false, //不显示刻度标签
        },

        detail: {
          show: true,
          //显示数据的样式
          valueAnimation: true,
          offsetCenter: [0, 0],
          fontSize: 18,
          lineHeight: 18,
          formatter: "{value}%",
          fontWeight: "normal",
          // color: 'auto',
          color: "rgba(28,139,255)",
        },
        title: {
          show: true,
          offsetCenter: [0, "30%"],
          color: "rgb(124,124,124)",
          fontSize: 12,
        },
        data: this.chartData.chartDataInside,
      };

      let options = {
        series: [seriesInside],
      };

      myChart.setOption(options);
      //
    },
  },
};
</script>

<style></style>
